<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }

        .breadcrumb {
            height: 42px;
            border-bottom: 1px solid #dbdbdb;
        }

        .container {
            width: 1160px;
            margin: 0 auto;
            border: 1px solid;
        }

        .title {
            width: 811px;
            height: 34px;
            margin: 62px auto 31px;
            background-color: aquamarine;
        }

        .image-lg {
            height: 505px;
            width: 1160px;
            background-color: chocolate;
            margin-bottom: 34px;
        }

        .image-box {
            background-color: khaki;
        }

        .grid-box-1 {
            display: grid;
            /* 总共有 3 列，每列宽度依次为 374px 374px 374px */
            grid-template-columns: 374px 374px 374px;
            /* 总共 2 行，每行的高度都为 100px */
            grid-template-rows: 436px 436px;
            /* 行列间距 */
            gap: 20px 19px;
        }

        .grid-box-2 {
            display: grid;
            /* 总共有 3 列，每列宽度依次为 374px 374px 374px */
            grid-template-columns: 374px 374px 374px;
            /* 总共 2 行，每行的高度都为 100px */
            grid-template-rows: 374px 436px;
            /* 行列间距 */
            gap: 20px 19px;
        }

        .row-2 {
            /* 当前这个单元格，需要占据2行 */
            grid-row-start: span 2;
        }

        .column-2 {
            grid-column-start: span 2;
        }
    </style>
</head>

<body>
    <!-- 面包屑（小标题） -->
    <div class="breadcrumb"></div>

    <!-- 商品列表 -->
    <div class="container">
        <div class="title"></div>
        <div class="image-lg"></div>
        <div class="grid-box-1">
            <div class="image-box"></div>
            <div class="image-box"></div>
            <div class="image-box"></div>
            <div class="image-box"></div>
            <div class="image-box"></div>
            <div class="image-box"></div>
        </div>

        <div class="title"></div>
        <div class="image-lg"></div>
        <div class="grid-box-1">
            <div class="image-box"></div>
            <div class="image-box"></div>
            <div class="image-box"></div>
            <div class="image-box"></div>
            <div class="image-box"></div>
            <div class="image-box"></div>
        </div>

        <div class="title"></div>
        <div class="grid-box-1">
            <div class="image-box row-2"></div>
            <div class="image-box"></div>
            <div class="image-box"></div>
            <div class="image-box"></div>
            <div class="image-box"></div>
        </div>
        <div class="title"></div>
        <div class="grid-box-2">
            <div class="image-box column-2"></div>
            <div class="image-box"></div>
            <div class="image-box"></div>
            <div class="image-box"></div>
            <div class="image-box"></div>
        </div>

    </div>
</body>

</html>